<script lang="ts" setup>
const bp = useAppBreakpoints();
</script>

<template>
  <div class="mb-20">
    <div class="grid grid-cols-4 gap-x-5 container lt-mobilel:(grid-cols-1 gap-y-12) lt-tablet:(grid-cols-2 gap-y-12)">
      <div class="benefit-item benefit-item-1">
        <i class="benefit-item-icon" :class="bp.ltTabletl ? 'benefit-item-icon-mb' : 'benefit-item-icon'" />
        <h3 class="benefit-item-title">
          Trusted brand
        </h3>
        <p class="benefit-item-desc">
          G9.game is a Leading Crypto Casino with 4 years of experience, a large international community of 4 million users, and the internal BFG token.
        </p>
      </div>
      <div class="benefit-item benefit-item-2">
        <i class="benefit-item-icon" :class="bp.ltTabletl ? 'benefit-item-icon-mb' : 'benefit-item-icon'" />
        <h3 class="benefit-item-title">
          Fast Payouts
        </h3>
        <p class="benefit-item-desc">
          We’ve paid out more than 3 million to our Affiliates. Get your payout on the 1st day of each month. No negative balance carried over
        </p>
      </div>
      <div class="benefit-item benefit-item-3">
        <i class="benefit-item-icon" :class="bp.ltTabletl ? 'benefit-item-icon-mb' : 'benefit-item-icon'" />
        <h3 class="benefit-item-title">
          Traffic performance
        </h3>
        <p class="benefit-item-desc">
          A large number of different Bonuses and Features for users make it possible to keep your traffic on G9.game as efficiently as possible
        </p>
      </div>
      <div class="benefit-item benefit-item-4">
        <i class="benefit-item-icon" :class="bp.ltTabletl ? 'benefit-item-icon-mb' : 'benefit-item-icon'" />
        <h3 class="benefit-item-title">
          Professional support
        </h3>
        <p class="benefit-item-desc">
          Get fast and high-quality support on G9.game. Experienced affiliate managers provide you with the necessary information and promotional materials
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.benefit-item {
  background: linear-gradient(180deg, #a91919 0%, #1d1e24 100%);
  --uno: 'rounded-4 min-h-80 relative text-center pt-26 px-6 pb-6 lt-tablet:(min-h-46.5 pt-18)';
  .benefit-item-icon {
    --width: 180px;
    --height: 133px;
    background-size: var(--width) var(--height);
    bottom: calc(100% - 86px);
    height: var(--height);
    transform: translate(-50%);
    width: var(--width);
    --uno: 'absolute block left-50%';
  }
  .benefit-item-icon-mb {
    --width: 160px;
    --height: 118px;
    bottom: calc(100% - 80px);
  }
  .benefit-item-title {
    --uno: 'text-white text-5 font-700 mb-4';
  }
  .benefit-item-desc {
    --uno: 'text-3 font-400 text-slate-100 leading-normal';
  }
}

.benefit-item-1 .benefit-item-icon {
  background-image: url(../imgs/benefit-item-icon-1.png);
}
.benefit-item-2 .benefit-item-icon {
  background-image: url(../imgs/benefit-item-icon-2.png);
}
.benefit-item-3 .benefit-item-icon {
  background-image: url(../imgs/benefit-item-icon-3.png);
}
.benefit-item-4 .benefit-item-icon {
  background-image: url(../imgs/benefit-item-icon-4.png);
}
</style>
